<script setup>
import { ref, reactive, } from 'vue'
//
import { CaretTop, CaretBottom, Filter, Star, StarFilled, } from "@element-plus/icons-vue";
const data = reactive({
  // showFi工产ltet:false, //是否显示筛选框
  maxPrice: '',
  minParice: '',
  showSearchHistory: false,
  activeNav: 0,  //shaixunList的当前项
  shaixunList: ['综合排序', '销量', '价格',],
  shaixunList1: ['综合排序', '销量',],
  shaixunList2: ['综合排序', '成交量', '筛选'],
  filtetTime: [
    { name: "小于1年" },
    { name: "1～2年" },
    { name: "2～3年" },
    { name: "3～4年" },
    { name: "4年以上" },
  ],
  filtettotal: [
    { name: "0～5k" },
    { name: "5k～1w" },
    { name: "1w～2w" },
    { name: "2w～4w" },
    { name: "4w以上" },
  ],
});

const active = ref(1)
</script>

<template>

  <div class="wrapCenter" style="margin-top: 20px;">
    <div class="">
      <div>
        <div class="topsearch">
          <div class="flex">
            <div class="left">
              <img src="../../assets/logo.png" alt="">
            </div>
            <div class="right flex">
              <div>
                <div class="inputBox flex">
                  <input type="text" placeholder="请输入商品名称" />
                  <div class="seacrhIcon cur">
                    <img src="../../assets/search.png">
                  </div>
                </div>

              </div>

            </div>
          </div>

        </div>
        <div class="navTag co6 fontS20 flex">
          <span @click="active = 0; data.activeNav = 0" :class="active==0?'activetag cur' :'cur'">所有商品</span>
          <span @click="active = 1; data.activeNav = 0" :class="active == 1 ? 'activetag cur' : 'cur'">店铺</span>
          <span @click="active = 2; data.activeNav = 0" :class="active == 2 ? 'activetag cur' : 'cur'">工厂</span>
        </div>
        <div class="paixuBox flex fontS16 co6">
          <!-- 全部商品 -->
          <div v-if="active == 0" class="flex">
            <div v-for="(item, index) in data.shaixunList" :key="index" @click="data.activeNav = index"
              class=" cur flexCenter  li center" :class="data.activeNav == index ? 'active' : ''">
              <span> {{ item }}</span>
              <div v-if="index == 2">

                <div style="marginBottom:-10px"><el-icon size="8" color="#666">
                    <CaretTop />
                  </el-icon></div>
                <el-icon size="8" color="#666">
                  <CaretBottom />
                </el-icon>
              </div>

            </div>
          </div>

          <div class="priceBox co6 flex" v-if="active == 0">
            <span>价格区间：</span>
            <el-input v-model="data.minParice"
              style="box-shadow:none;width: 90px;background: #F5F5F5;border: 1px solid #CCCCCC;">
              <template #prepend style="background:none">￥</template>
            </el-input>
            <div style="padding:0 10px"> - </div>
            <el-input v-model="data.maxPrice"
              style="box-shadow:none;width: 90px;background: #F5F5F5;border: 1px solid #CCCCCC;">
              <template #prepend style="background:none">￥</template>
            </el-input>
          </div>

          <!-- 工厂 -->
          <div v-if="active == 1" class="flex">
            <div v-for="(item, index) in data.shaixunList1" :key="index" @click="data.activeNav = index"
              class=" cur flexCenter  li center" :class="data.activeNav == index ? 'active' : ''">
              <span> {{ item }}</span>
              <div v-if="index == 3 && active == 2">
                <el-icon size="13" color="#666">
                  <Filter />
                </el-icon>
              </div>
            </div>
          </div>


          <div class="flex" v-if="active == 2">
            <div v-for="(item, index) in data.shaixunList2" :key="index" @click="data.activeNav = index"
              class=" cur flexCenter  li center" :class="data.activeNav == index ? 'active' : ''">
              <span> {{ item }}</span>
              <div class="flitetBox co3 fontS16" v-if="index == 2 && data.activeNav == 2">
                <div style="text-align:left">开店时间</div>
                <div class="flex " style="flex-wrap:wrap">
                  <div v-for="(item, index) in data.filtetTime" :key="index" class="li" style="margin-left: 10px;">{{
                      item.name
                  }}</div>
                </div>
                <div style="text-align:left;margin-top: 40px;">成交量</div>
                <div class="flex" style="flex-wrap:wrap">
                  <div v-for="(item, index) in data.filtettotal" :key="index" class="li" style="margin-left: 10px;">{{
                      item.name
                  }}</div>
                </div>
              </div>
              <div v-if="index == 2">
                <el-icon size="13" color="#666">
                  <Filter />
                </el-icon>
              </div>
            </div>
          </div>
        </div>

        <div class="list" v-if="active == 0">
          <el-row :gutter="16">
            <el-col :span="6" v-for="item in 12" :key="item">
              <div class="li" >
                <img src="../../assets/Image/5494c0fa4c8d21450ef7357d0929a5d8.jpeg" alt="">
                <div class="title elipes2 co3 fonrS22">纯棉重工连帽卫衣女秋冬慵懒加绒加厚字母印花外套</div>
                <div class="flex">
                  <span class="homeRed fontS12">￥</span>
                  <span class="homeRed fontS28">27.00</span>
                  <span class="fontS18 co9" style="margin-left:14px">340人付款</span>
                </div>
              </div>
            </el-col>
          </el-row>

        </div>
        <!-- 店铺 -->
        <div v-if="active == 1">
          <div class="store flexJBC" v-for="item in 3" :key="item">
            <div class="left">
              <div class="flex">
                <img src="../../assets/Image/5494c0fa4c8d21450ef7357d0929a5d8.jpeg" alt="" class="storeImg">
                <div class="co6 fontS22">
                  <div>NETSEA 官方旗舰店</div>
                  <div class="flex" style="margin:13px 0px 20px ;">
                    <el-icon size="23" color="#FFC047" v-for="item in 4" :key="item">
                      <StarFilled />
                    </el-icon>
                    <el-icon size="20" color="#ccc">
                      <Star />
                    </el-icon>
                    <span class="fontS20" style="color:#FFC047">4分</span>

                  </div>
                  <div class="co9 fontS16">已成交2.3W+</div>
                </div>
              </div>
              <div class="co9 fontS18" style="margin-top:10px ;">
                主营：移动电源｜蓝牙耳机｜平板电脑
              </div>
            </div>
            <div class="right flex">
              <div v-for="item in 4" class="right_li" :key="item">
                <img src="../../assets/Image/5494c0fa4c8d21450ef7357d0929a5d8.jpeg" alt="">
                <div class="priceBOx fontS20 cof">￥190</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 工厂 -->
        <div v-if="active == 2">
          <div class="store flexJBC factory" v-for="item in 3" :key="item">
            <div class="left">
              <div class="flex">
                <img src="../../assets/Image/5494c0fa4c8d21450ef7357d0929a5d8.jpeg" alt="" class="storeImg">
                <div class="co6 fontS22">
                  <div>NETSEA 官方旗舰店</div>
                  <div class="co9 fontS18" style="margin:10px 0">移动电源｜蓝牙耳机｜平板电脑</div>
                  <div class="flex co6 fontS16">
                    <span style="padding:6px 18px;background: #FFF2D0;">物美价廉</span>
                    <span style="padding:6px 18px;background: #FFDED3;margin-left: 10px;">良心店</span>

                  </div>
                  <div class="co9 fontS18" style="margin:10px 0">国内贸易，货物及技术进出口，保障好货高品质</div>
                  <div class="co9 fontS18">已成交2.3W+</div>
                </div>
              </div>
            </div>
            <div class="right flex">
              <div v-for="item in 4" class="right_li" :key="item">
                <img src="../../assets/Image/5494c0fa4c8d21450ef7357d0929a5d8.jpeg" alt="">
                <div class="priceBOx fontS20 cof">￥190</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.store {
  .right {
    .right_li {
      margin-left: 20px;

      .priceBOx {
        position: absolute;
        // width: 80px;
        height: 32px;
        line-height: 32px;
        background: rgba(0, 0, 0, 0.6);
        bottom: 0;
        right: 0;
      }

      position: relative;

      img {
        width: 200px;
        height: 200px;
        background: #FAFAFA;
        opacity: 1;
        border: 1px solid #CCCCCC;
      }
    }
  }

  .left {
    .storeImg {
      width: 120px;
      height: 120px;
      background: #F2F2F2;
      opacity: 1;
      border: 1px solid #CCCCCC;
      margin-right: 20px;
    }
  }

  align-items: flex-start;
  width: 1472px;
  padding: 40px 0;
  // box-sizing: border-box;
  border-bottom: 1px solid #CCCCCC;
}

.list {

  flex-wrap: wrap;
  padding: 0 40px;
  box-sizing: border-box;
  justify-content: flex-start;

  .li {
    width: 336px;
    position: relative;

    .title {
      margin: 20px 0 16px;
      line-height: 28px;
    }

    margin-bottom: 40px;
    margin-right: 16px;

    img {
      width: 336px;
      height: 339px;
      display: block;
    }
  }
}

.paixuBox {
  .flitetBox {
    width: 390px;
    height: 352px;
    background: #FFFFFF;
    box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.12);
    position: absolute;
    padding: 20px 10px;
    box-sizing: border-box;
    top: 60px;
    left: 0;
    z-index: 9;

    .li {
      width: 110px;
      text-align: center;
      line-height: 40px;
      height: 40px;
      background: #F5F5F5;
      font-size: 16px;
      color: #666;
      margin-top: 14px;
      ;

    }
  }

  .priceBox {
    margin-left: 79px;

    /deep/.el-input-group__append,
    /deep/.el-input-group__prepend,
    /deep/.el-input__wrapper {
      background-color: #fff;
      box-shadow: none;
    }

    /deep/.el-input-group__prepend {
      padding: 0;
    }

  }

  width: 1472px;
  height: 58px;
  // line-height: 58px;
  background: #F5F5F5;
  border: 1px solid #CCCCCC;
  margin: 20px 0;

  .active {
    color: #DD2131;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
  }

  .li {
    width: 140px;
    align-items: center;
    height: 58px;
    position: relative;

  }
}

.navTag {
  margin-top: 20px;
  // width: 100%;
  width: 1472px;
  border-bottom: 2px solid #DD2131;

  .activetag {
    background: #DD2131;
    color: #fff;
  }

  span {
    display: block;
    width: 140px;
    height: 48px;
    line-height: 48px;
    text-align: center;
  }
}

.topsearch {
  .left {
    margin-right: 90px;
  }

  .right {


    .inputBox {
      width: 683px;
      height: 48px;
      border: 2px solid #DD2131;
      padding-left: 20px;
      box-sizing: border-box;

      input {
        height: 41px;
        flex: 1;
        border: none;
        outline: none;
      }

      .seacrhIcon {
        width: 75px;
        height: 48px;
        background: #DD2131;
        display: flex;
        align-items: center;
        position: relative;
        right: -1px;

        img {
          width: 29.97px;
          height: 29.97px;
          margin: 0 auto;
        }
      }
    }

  }
}
</style>
